<template>
    <div class="app-container">
        <h3>用户资料</h3>
        <table class="usertable">
            <tr>
                <th>
                    用户ID
                </th>
                <td>
                    {{detailUser.id}}
                </td>
            </tr>
            <tr>
                <th>
                    用户名
                </th>
                <td>
                    {{detailUser.name ? detailUser.name : "无"}}
                </td>
            </tr>
            <tr>
                <th>
                    手机号
                </th>
                <td>
                    {{detailUser.phone}}
                </td>
            </tr>
            <tr>
                <th>
                    渠道
                </th>
                <td>
                    {{detailUser.channel|parseChannel}}
                </td>
            </tr>
            <tr>
                <th>
                    注册时间
                </th>
                <td>
                    {{detailUser.createTime|parseTime}}
                </td>
            </tr>
        </table>

        <h3>购买记录</h3>

        <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>

            <el-table-column label='订单ID' align="center" width="200">
                <template scope="scope">
                    {{scope.row.orderSn}}
                </template>
            </el-table-column>
            <el-table-column label="课程名称" align="center" width="200">
                <template scope="scope">
                    {{scope.row.courseName}}
                </template>
            </el-table-column>
            <el-table-column label="实付金额" align="center" width="150">
                <template scope="scope">
                    ￥{{scope.row.discPrice|priceFormat}}
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" width="100">
                <template scope="scope">
                    {{scope.row.status|parseOrderStatus}}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" width="200">
                <template scope="scope">
                    <span>{{scope.row.createTime|parseTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付时间" align="center" width="200">
                <template scope="scope">
                    <span>{{scope.row.payTime|parseTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付方式" align="center" width="150">
                <template scope="scope">
                    <span>{{scope.row.payType|parsePayType}}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单来源" align="center" width="150">
                <template scope="scope">
                    <span>{{scope.row.channel|parseChannel}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
                           :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    import { getDetail, getUserOrders } from '@/api/statuser';

    export default {
        data() {
            return {
                loading: false,
                detailUser: {},
                list: null,
                total: null,
                listQuery: {
                    page: 1,
                    pageSize: 30,
                    searchId: ''
                },
                isUpdate: false,
                playAudioUrl: '',
                courseName: ''
            }
        },
        created() {
            const reg = /\/detail\/(\d*)$/
            if (reg.test(this.$route.path)) {
                const ID = RegExp.$1;
                this.listQuery.searchId = ID;
                this.getUserDetail();
                this.getList();
            }
        },
        methods: {
            getUserDetail() {
                getDetail(this.listQuery.searchId).then(response => {
                    this.detailUser = response.data;
                }).catch(err => {
                    console.log(err)
                });
            },
            getList() {
                this.listLoading = true;
                getUserOrders(this.listQuery).then(response => {
                    this.list = response.data.data;
                    this.total = response.data.totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err)
                });
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            }
        }
    }
</script>

<style>
    .usertable {
        border: 1px solid #cccccc;
        width: 600px;
        text-align: center;
    }
    .usertable tr {
        border: 1px solid #cccccc;
    }
    .usertable th,td {
        border: 1px solid #cccccc;
        height: 30px;
        line-height: 30px;
    }
</style>